<template>
    <Modal :mask-closable="false" :title="`${$t('common.chooseQrCodePrint')}`" width="1100px" v-model="printVisible" :footer-hide="true"
        class="modal-wrap-layout">
        <Row>
            <Col :span="12">
            <section id="equipmentsprintOne">
                <div class="bigBorder" v-for="(item, index) of record" :key="'a' + index">
                    <div class="big-item-Border">
                        <div class="cro_left_top"></div>
                        <div class="cro_right_top"></div>
                        <div class="cro_left_bottom"></div>
                        <div class="cro_right_bottom"></div>
                        <h1 class="print-big-title">
                            设备管理档案卡
                        </h1>
                        <Row class="bigRow">
                            <Col :span="15">
                            <Col :span="24" class="print-big-item">
                            <!-- <span class="print-big-item-title">{{ $t('preliminary.EquipmentName') }} </span> -->
                            <span class="print-big-item-title">设备名称</span>
                            <span class="print-big-item-content">{{ item.deviceName }}</span>
                            </Col>
                            <Col :span="24" class="print-big-item">
                            <!-- <span class="print-big-item-title">{{ $t('equipCheck.AssetNo') }} </span> -->
                            <span class="print-big-item-title">资产编号</span>
                            <span class="print-big-item-content">{{ item.assetCode }}</span>
                            </Col>
                            <Col :span="24" class="print-big-item">
                            <!-- <span class="print-big-item-title">{{ $t('equipCheck.SerialNo') }} </span> -->
                            <span class="print-big-item-title">设备流水号</span>
                            <span class="print-big-item-content">{{ item.deviceMId }}</span>
                            </Col>
                            <Col :span="24" class="print-big-item">
                            <!-- <span class="print-big-item-title">{{ $t('equipCheck.EquipmentNo') }}</span> -->
                            <span class="print-big-item-title">设备编号</span>
                            <span class="print-big-item-content">{{ item.deviceNo }}</span>
                            </Col>
                            <Col :span="24" class="print-big-item">
                            <!-- <span class="print-big-item-title">{{ $t('equipCheck.Model') }}</span> -->
                            <span class="print-big-item-title">规格型号</span>
                            <span class="print-big-item-content">{{ item.deviceSpec }}</span>
                            </Col>
                            <Col :span="24" class="print-big-item">
                            <!-- <span class="print-big-item-title">{{ $t('ledger.Voltage') }}(V)</span> -->
                            <span class="print-big-item-title">电源电压(V)</span>
                            <span class="print-big-item-content">{{ item.voltage }}</span>
                            </Col>
                            </Col>
                            <Col :span="9">
                            <Col :span="24">
                            <Col :span="24" class="print-big-item">
                            <!-- <span class="print-big-item-title1">{{ $t('ledger.EquipmentPower') }} </span> -->
                            <span class="print-big-item-title1">设备功率(kW)</span>
                            <span class="print-big-item-content1">{{ item.devicePower }}</span>
                            </Col>
                            <Col :span="24" class="print-big-item">
                            <!-- <span class="print-big-item-title1">{{ $t('ledger.EquipmentWeight') }} </span> -->
                            <span class="print-big-item-title1">设备重量(kg)</span>
                            <span class="print-big-item-content1">{{ item.deviceWeight }}</span>
                            </Col>
                            </Col>
                            <Col :span="24" align="center" class="print-qrcode">
                            <div id="qrcode" ref="qrcode"></div>
                            </Col>
                            </Col>
                        </Row>
                    </div>
                </div>
            </section>
            <Row style="margin: 5px">
                <Col align="center">
                <Button v-print="'#equipmentsprintOne'" type="primary">选择打印</Button>
                </Col>
            </Row>
            </Col>
            <Col :span="12">
            <section id="equipmentsprintTwo">
                <div class="bigBorder" v-for="(item1, index) of record" :key="'b' + index">
                    <div class="big-item-Border">
                        <div class="cro_left_top"></div>
                        <div class="cro_right_top"></div>
                        <div class="cro_left_bottom"></div>
                        <div class="cro_right_bottom"></div>
                        <h1 class="print-big-title">
                            设备管理档案卡
                        </h1>
                        <Row class="bigRow">
                            <Col :span="15">
                            <Col :span="24" class="print-big-item1">
                            <!-- <span class="print-big-item-title">{{ $t('preliminary.EquipmentName') }} </span> -->
                            <span class="print-big-item-title">设备名称</span>
                            <span class="print-big-item-content">{{ item1.deviceName }}</span>
                            </Col>
                            <Col :span="24" class="print-big-item1">
                            <!-- <span class="print-big-item-title">{{ $t('equipCheck.AssetNo') }} </span> -->
                            <span class="print-big-item-title">资产编号</span>
                            <span class="print-big-item-content">{{ item1.assetCode }}</span>
                            </Col>
                            <Col :span="24" class="print-big-item1">
                            <!-- <span class="print-big-item-title">{{ $t('equipCheck.SerialNo') }} </span> -->
                            <span class="print-big-item-title">设备流水号</span>
                            <span class="print-big-item-content">{{ item1.deviceMId }}</span>
                            </Col>
                            <Col :span="24" class="print-big-item1">
                            <!-- <span class="print-big-item-title">{{ $t('equipCheck.EquipmentNo') }}</span> -->
                            <span class="print-big-item-title">设备编号</span>
                            <span class="print-big-item-content">{{ item1.deviceNo }}</span>
                            </Col>
                            </Col>
                            <Col :span="9" class="print-big-item1">
                            <Col :span="24" align="center" class="print-qrcode">
                            <div id="qrcodeOne" ref="qrcodeOne"></div>
                            </Col>
                            </Col>
                        </Row>
                    </div>
                </div>
            </section>
            <Row style="margin: 5px">
                <Col align="center">
                <Button v-print="'#equipmentsprintTwo'" type="primary">选择打印</Button>
                </Col>
            </Row>
            </Col>
        </Row>
    </Modal>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
    name: "ledgerPrintModal",
    data() {
        return {
            type: '',
            printVisible: false,
            record: [],
        }
    },
    methods: {
        show(record, type) {
            this.printVisible = true;
            this.type = type;
            let mids = record.map(item => {
                return item.deviceMId
            })
            this.record = record

            this.printDetail(mids.join(','))
        },
        printDetail(deviceMId) {
            this.$nextTick(() => {
                this.createQRCode()
                this.createQRCodeOne()
            })
            // this.axios({
            //     method: 'get',
            //     url: '/dms/dmsDeviceTz/getDevicePrint',
            //     params: {
            //         deviceMId
            //     }
            // }).then(res => {
            //     if (res.code === 200) {
            //         this.record = res.data
            //         this.$nextTick(()=>{
            //             this.createQRCode()
            //             this.createQRCodeOne()
            //         })
            //     } else {
            //         this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
            //     }
            // })

        },
        createQRCode() {
            this.$nextTick(() => {
                this.record.forEach((item, index) => {
                    console.log(item,index,123123);
                    this.$refs.qrcode[index].innerHTML = ''; //清除二维码方法一
                    let text = item.deviceMId;
                    setTimeout(() => {
                        let qrcode = new QRCode(this.$refs.qrcode[index],
                         {
                            text: text, //页面地址 ,如果页面需要参数传递请注意哈希模式#
                            width: 120,
                            height: 120,
                            colorDark: '#000000',
                            colorLight: '#ffffff',
                            correctLevel: QRCode.CorrectLevel.H,
                        })
                        let logo = new Image();
                        logo.crossOrigin = 'Anonymous';
                        // logo.src = require("@/assets/images/icon1.png");
                        logo.onload = function () {
                            let qrImg = qrcode._el.getElementsByTagName('img')[0];
                            let canvas = qrcode._el.getElementsByTagName('canvas')[0];
                            // let ctx = canvas.getContext("2d");
                            // ctx.drawImage(logo, 120 * 0.5 - 33, 120 * 0.5 - 17, 66, 33);
                            qrImg.src = canvas.toDataURL();
                        }
                    }, 500)
                })
            })
        },
        createQRCodeOne() {
            this.$nextTick(() => {
                this.record.forEach((item, index) => {
                    this.$refs.qrcodeOne[index].innerHTML = ''; //清除二维码方法一
                    let text = item.deviceMId;
                    setTimeout(() => {
                        let qrcode = new QRCode(this.$refs.qrcodeOne[index], {
                            text: text, //页面地址 ,如果页面需要参数传递请注意哈希模式#
                            width: 150,
                            height: 150,
                            colorDark: '#000000',
                            colorLight: '#ffffff',
                            correctLevel: QRCode.CorrectLevel.H,
                        })
                        let logo = new Image();
                        logo.crossOrigin = 'Anonymous';
                        // logo.src = require("@/assets/images/icon1.png");
                        logo.onload = function () {
                            let qrImg = qrcode._el.getElementsByTagName('img')[0];
                            let canvas = qrcode._el.getElementsByTagName('canvas')[0];
                            // let ctx = canvas.getContext("2d");
                            // ctx.drawImage(logo, 150 * 0.5 - 33, 150 * 0.5 - 17, 66, 33);
                            qrImg.src = canvas.toDataURL();
                        }
                    }, 500)
                })
            })
        }
    }
}
</script>

<style media="print">
@page {
    size: auto;
    margin: 3mm;
}
</style>
<style lang="scss" scoped>
.bigBorder {
    background: rgb(1, 112, 183) !important;
    width: 14cm;
    height: 9cm;
    padding: 12px;
    margin-bottom: 0.04cm;

    .big-item-Border {
        position: relative;
        border: 2px solid #fff;
        height: 100%;

        .cro_left_top,
        .cro_right_top,
        .cro_left_bottom,
        .cro_right_bottom {
            position: absolute;
            width: 20px;
            height: 20px;
            z-index: 999;
            background: rgb(1, 112, 183) !important;
        }

        .cro_left_top {
            top: -2px;
            left: -2px;
            border-radius: 0px 0px 20px 0px;
            border-bottom: 2px solid #fff;
            border-right: 2px solid #fff;
        }

        .cro_right_top {
            top: -2px;
            right: -2px;
            border-radius: 0px 0px 0px 20px;
            border-bottom: 2px solid #fff;
            border-left: 2px solid #fff;
        }

        .cro_left_bottom {
            left: -2px;
            bottom: -2px;
            border-radius: 0px 20px 0px 0px;
            border-top: 2px solid #fff;
            border-right: 2px solid #fff;
        }

        .cro_right_bottom {
            right: -2px;
            bottom: -2px;
            border-radius: 20px 0px 0px 0px;
            border-top: 2px solid #fff;
            border-left: 2px solid #fff;
        }
    }

    .bigRow {
        padding: 0px 15px;
    }
}

.print-big-title {
    font-size: 26px;
    font-weight: bold;
    padding: 20px 0;
    text-align: center;
    color: #fff !important;
    // letter-spacing: 6px;
}

.print-big-item {
    color: #fff !important;
    padding: 4px 0;

    .print-big-item-title {
        font-size: 14px;
        font-weight: bold;
        display: inline-block;
        width: 33%;
        color: #fff !important;
        text-align-last: justify;
    }

    .print-big-item-content {
        font-size: 14px;
        display: inline-block;
        font-weight: 600;
        margin-left: 3%;
        width: 60%;
        text-align: center;
        color: #fff !important;
        border: 1px solid #fff;

    }

    .print-big-item-title1 {
        font-size: 14px;
        font-weight: 600;
        display: inline-block;
        width: 65%;
        color: #fff !important;
        text-align-last: justify;
    }

    .print-big-item-content1 {
        font-size: 14px;
        display: inline-block;
        font-weight: 500;
        text-align: center;
        margin-left: 2%;
        width: 33%;
        color: #fff !important;
        border: 1px solid #fff;
    }
}

.print-big-item1 {
    color: #fff !important;
    padding: 12px 0;

    .print-qrcode {
        padding-top: 10px;
    }

    .print-big-item-title {
        font-size: 14px;
        font-weight: bold;
        display: inline-block;
        width: 33%;
        color: #fff !important;
        text-align-last: justify;
    }

    .print-big-item-content {
        font-size: 14px;
        display: inline-block;
        font-weight: 600;
        margin-left: 3%;
        width: 60%;
        text-align: center;
        color: #fff !important;
        border: 1px solid #fff;

    }
}
</style>
